import React from "react";
import PropTypes from "prop-types";
import styles from './index.module.css'

const PageTitle =  function PageTitle(props) {
  let { title ,children} = props;
  children = React.Children.toArray(children); // 把插槽信息转换成数组
  console.log(children);
  let headerSlot = [],
    footerSlot = [],
    defaultSlot = [];
  children.forEach((child) => {
    let { slot } = child.props;
    if (slot === "pageHeader") {
      headerSlot.push(child);
    } else if (slot === "pageFooter") {
      footerSlot.push(child);
    } else {
      defaultSlot.push(child);
    }
  });
  return (
    <div className={styles.page}>
      <h1>{title}</h1>
      <header style={{fontSize: '18px',color: 'red'}}>{headerSlot}</header> 
      <section style={{fontSize: '22px',color: '#aaaaaa',marginTop: '10px',marginBottom: '10px'}}>{defaultSlot}</section> 
      <footer style={{fontSize: '18px',color: 'red'}}>{footerSlot}</footer> 
    </div>
  );
}

PageTitle.defaultProps = {
    title: "React",
};
PageTitle.propTypes = {
    title: PropTypes.string.isRequired,
};

export default PageTitle;
